<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>登录</title>
    <link rel="icon" href="./images/gongzhenglogo.png">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/sign-up-login.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/inputEffect.css" />
    <link rel="stylesheet" href="css/tooltips.css" />
    <link rel="stylesheet" href="css/spop.min.css" />

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        body {
            background-repeat: no-repeat;
            background-position: center center #2D0F0F;
            background-color: #00BDDC;
            background-image: url(images/5647.png);
            background-size: 100% 100%;
        }

        .snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 100001;
        }
    </style>
</head>
<body>
    <!-- 视频背景 -->
<!--    <video id="bg-video" autoplay loop muted playsinline style="position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;position:fixed;top:0;left:0;z-index:-1;overflow:hidden;">-->
<!--        <source src="images/303.mp4" type="video/mp4">-->

<!--    </video>-->
<!-- 登录控件 -->
<div id="login">
    <input id="tab-1" type="radio" name="tab" class="sign-in hidden" checked />
    <input id="tab-2" type="radio" name="tab" class="sign-up hidden" />
    <input id="tab-3" type="radio" name="tab" class="sign-out hidden" />
    <div class="wrapper">
        <!-- 登录页面 -->
        <div class="login sign-in-htm">                                <br><br><br><br><br> <br><br><br><br><br>
            <br><br><br><br><br>

           
            <form class="container offset1 loginform" th:action="@{~/login.action}">
                <!-- 猫头鹰控件 -->
                <div id="owl-login" class="login-owl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                        <div class="arm"></div>
                        <div class="arm arm-r"></div>
                    </div>
                </div>
                <div class="pad input-container">
                    <section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="login-username" autocomplete="off" placeholder="请输入账号" tabindex="1" maxlength="15" name="username" />
								<label class="input__label input__label--hideo" for="login-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="login-password" placeholder="请输入密码" tabindex="2" maxlength="15" name="password" />
								<label class="input__label input__label--hideo" for="login-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <div th:text="${message}" style="color: red"></div>
                    </section>
                </div>
                <div class="form-actions">
                    <a tabindex="4" class="btn pull-left btn-link text-muted" href="./TermsOfService.html" onClick="goto_forget()">
                        <label style="margin-left:10px;font-size:14px;">
                        <input type="checkbox" id="agree-checkbox" style="vertical-align:middle;"/> 
                    </label>投标法
                </a>
                    <!-- 新增勾选框 -->
                    
                    <!-- 登录按钮默认禁用 -->
                    <input class="btn btn-primary" type="submit" tabindex="3" value="登录" style="color: white;" id="login-btn" disabled />
                </div>
            </form>

        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 勾选框控制登录按钮
            var checkbox = document.getElementById('agree-checkbox');
            var loginBtn = document.getElementById('login-btn');
            checkbox.addEventListener('change', function() {
                loginBtn.disabled = !checkbox.checked;
            });

            var form = document.querySelector('form.loginform');
            form.addEventListener('submit', function(e) {
                if (!checkbox.checked) {
                    alert('请先勾选同意相关条款');
                    e.preventDefault();
                    return;
                }
                e.preventDefault(); // 阻止表单默认提交
                var username = document.getElementById('login-username').value;
                var password = document.getElementById('login-password').value;
                // 拼接接口地址
                var url = 'http://localhost:8080/api/user/getName?id=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password);
                fetch(url)
                    .then(response => response.text())
                    .then(data => {
                        if (data && data.trim() !== '') {
                            alert(data + ' 登录成功');
                            // 保存用户名到 localStorage
                            localStorage.setItem('username', data.trim());
                            window.location.href = 'usersetHome.html';
                        } else {
                            alert('用户名或密码错误');
                        }
                    })
                    .catch(err => {
                        alert('登录失败，请检查网络或稍后重试');
                    });
            });
        });
    </script>
</body>
</html>
